<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>管理员主页</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="robots" content="all,follow">
  <!-- Bootstrap CSS-->
  <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome CSS-->
  <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
  <!-- Fontastic Custom icon font-->
  <link rel="stylesheet" href="css/fontastic.css">
  <!-- Google fonts - Poppins -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
  <!-- theme stylesheet-->
  <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
  <!-- Custom stylesheet - for your changes-->
  <link rel="stylesheet" href="css/custom.css">
  <!-- Favicon-->
  <link rel="shortcut icon" href="img/favicon.ico">
  <!-- Tweaks for older IEs-->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>

<body>
  <div class="page">
    <!-- Main Navbar-->
    <header class="header">
      <nav class="navbar">

        <div class="container-fluid">
          <div class="navbar-holder d-flex align-items-center justify-content-between">
            <!-- Navbar Header-->
            <div class="navbar-header">
              <!-- Navbar Brand --><a href="index" class="navbar-brand d-none d-sm-inline-block">
                <div class="brand-text d-none d-lg-inline-block"><span>欢迎 </span><strong>管理员</strong></div>
              </a>
              <!-- Toggle Button--><a id="toggle-btn" href="#"
                class="menu-btn active"><span></span><span></span><span></span></a>
            </div>
            <!-- Navbar Menu -->
            <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
              <li class="nav-item"><a href="login" class="nav-link logout"> <span
                    class="d-none d-sm-inline">退出</span><i class="fa fa-sign-out"></i></a></li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <div class="page-content d-flex align-items-stretch">
      <!-- Side Navbar -->
      <nav class="side-navbar">
        <ul class="list-unstyled">
          <li class="active"><a href="index"> <i class="icon-home"></i>数据视点</a></li>
          <li><a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i
                class="icon-interface-windows"></i>管理</a>
            <ul id="exampledropdownDropdown" class="collapse list-unstyled ">
              <li><a href="studentTable">学生</a></li>
              <li><a href="teacherTable">教师</a></li>
              <li><a href="courseTable">课程信息</a></li>
              <li><a href="selectionTable">课程评价</a></li>
              <li><a href="newsTable">资讯管理</a></li>

            </ul>
          </li>
          <li><a href="news"> <i class="icon-padnote"></i>资讯发布</a></li>
        </ul>
      </nav>
      <div class="content-inner">
        <!-- Page Header-->
        <header class="page-header">
          <div class="container-fluid">
            <h2 class="no-margin-bottom">数据视点</h2>
          </div>
        </header>
        <!-- Dashboard Counts Section-->
        <section class="dashboard-counts no-padding-bottom">
          <div class="container-fluid" id="vueapp">
            <div class="row bg-white has-shadow">
              <!-- Item -->
              <div class="col-xl-3 col-sm-6">
                <div class="item d-flex align-items-center">
                  <div class="icon bg-violet"><i class="icon-user"></i></div>
                  <div class="title"><span>教师数<br></span>
                    <div class="progress">
                      <div role="progressbar" style="width: 25%; height: 4px;" aria-valuenow="25" aria-valuemin="0"
                        aria-valuemax="100" class="progress-bar bg-violet"></div>
                    </div>
                  </div>
                  <div class="number"><strong v-text="teacherNumber"></strong></div>
                </div>
              </div>
              <!-- Item -->
              <div class="col-xl-3 col-sm-6">
                <div class="item d-flex align-items-center">
                  <div class="icon bg-red"><i class="icon-padnote"></i></div>
                  <div class="title"><span>学生数<br></span>
                    <div class="progress">
                      <div role="progressbar" style="width: 70%; height: 4px;" aria-valuenow="70" aria-valuemin="0"
                        aria-valuemax="100" class="progress-bar bg-red"></div>
                    </div>
                  </div>
                  <div class="number"><strong v-text="studentNumber"></strong></div>
                </div>
              </div>
              <!-- Item -->
              <div class="col-xl-3 col-sm-6">
                <div class="item d-flex align-items-center">
                  <div class="icon bg-green"><i class="icon-bill"></i></div>
                  <div class="title"><span>课程总数</span>
                    <div class="progress">
                      <div role="progressbar" style="width: 40%; height: 4px;" aria-valuenow="40" aria-valuemin="0"
                        aria-valuemax="100" class="progress-bar bg-green"></div>
                    </div>
                  </div>
                  <div class="number"><strong v-text="courserNumber"></strong></div>
                </div>
              </div>
              <!-- Item -->
              <div class="col-xl-3 col-sm-6">
                <div class="item d-flex align-items-center">
                  <div class="icon bg-orange"><i class="icon-check"></i></div>
                  <div class="title"><span>总学时长</span>
                    <div class="progress">
                      <div role="progressbar" style="width: 50%; height: 4px;" aria-valuenow="50" aria-valuemin="0"
                        aria-valuemax="100" class="progress-bar bg-orange"></div>
                    </div>
                  </div>
                  <div class="number"><strong v-text="totalTime" ></strong></div>
                </div>
              </div>
            </div>
          </div>
          <section class="dashboard-header">
            <div id="main" style="width: 100%;height:400px;"></div>
          </section>
        </section>
        <!-- Dashboard Header Section    -->

        <!-- Projects Section-->

        <!-- Page Footer-->
        <footer class="main-footer">
          <div class="container-fluid">
            <div class="row">
              <div class="col-sm-6">
                <p>在线学习 &copy; 2019 慕随心</p>
              </div>
              <div class="col-sm-6 text-right">
                <!-- Please do not remove the backlink to us unless you support further theme's development at https://bootstrapious.com/donate. It is part of the license conditions. Thank you for understanding :)-->
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
  </div>
  <!-- JavaScript files-->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/popper.js/umd/popper.min.js"> </script>
  <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
  <script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
  <script src="vendor/chart.js/Chart.min.js"></script>
  <script src="vendor/jquery-validation/jquery.validate.min.js"></script>
  <script src="js/charts-home.js"></script>
  <!-- Main File-->
  <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.min.js"></script>

  <script src="js/front.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>


</body>
<script>
  new Vue({
    el: "#vueapp",
    data: function () {
      return {
        teacherNumber: 0,
        studentNumber: 0,
        courserNumber: 0,
        totalTime:0
      }
    },
    created() {
      axios.get("/onlineAdmain/api/getNumber").then(
        response => (this.teacherNumber = response["data"]["data"]["teacherNumber"],
          this.studentNumber = response["data"]["data"]["studentNumber"],
          this.courserNumber = response["data"]["data"]["courserNumber"],
                this.totalTime = response["data"]["data"]["totalTime"],
          this.echarts())
      )
    },
    mounted() {

    },
    methods: {
      echarts() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        // app.title = '堆叠条形图';
        var _this = this;
        option = {
          xAxis: {
            type: 'category',
            data: ['教师数', '学生数',  '课程总数']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [this.teacherNumber, this.studentNumber,  this.courserNumber],
            type: 'bar'
          }]
        };

        myChart.setOption(option);
      }
    },


  });



</script>
<script type="text/javascript">

</script>

</html>